<template>
  <el-dialog title="说明" :visible.sync="$attrs.visableIf" @close="handleCloseDialog" :close-on-click-modal="false" :close-on-press-escape="false" append-to-body width="1000px">
      <div class="ant-modal-body">
        <div class="wrap___1jsaD">
          <div class="summary___2ADLo"><img src="//s.yezgea02.com/common/kp66ii.png" alt="" class="icon___1w3Ln">
            <div>
              <div class="title___oRZDT">行为标签</div>
              <div class="desc___3JIZW">以私聊情况、进群状态等维度，自动生成的客户行为标签体系<br>目前系统支持社群标签和私聊活跃度标签</div>
            </div>
          </div>
          <div class="demo___Go2yJ">
            <div class="title___oRZDT">场景示例：社群标签</div>
            <div class="desc___3JIZW">可根据业务需求，按是否进某个群的行为，为客户自动打标签</div>
            <img src="//s.yezgea02.com/common/trvdd6.png" alt="" class="step___dz77M">
            <div class="example___2V-5-">例如：<br>业务分为普通客户群和VIP客户群，可设置标签：已在普通客户群、未入普通客户群、已在VIP客户群、未入VIP客户群<br>客户已经加入任一一个普通客户群，自动打上已入普通客户群标签，如果加入了任一一个VIP客户群，则自动打上已入VIP客户群标签</div>
            <span class="ant-tag ant-tag-has-color figure-title___14lsz" style="background-color: rgb(255, 230, 229);">功能界面</span><img src="//s.yezgea02.com/common/r6Gy7L.png" alt="" class="figure___5sm8y">
            <div class="title___oRZDT">场景示例：私聊活跃度标签</div>
            <div class="desc___3JIZW">可根据业务需求，按客户私聊活跃度情况，为客户自动打标签</div>
            <img src="//s.yezgea02.com/common/vgsd0n.png" alt="" class="step___dz77M">
            <div class="example___2V-5-">例如：<br>1. 当新好友添加通过后X分钟未说话，则自动打上新好友x分钟未说话标签<br>2. 当好友持续5天未说话，则自动打上持续5天未说话标签</div>
            <span class="ant-tag ant-tag-has-color figure-title___14lsz" style="background-color: rgb(255, 230, 229);">功能界面</span><img src="//s.yezgea02.com/common/xwjTeK.png" alt="" class="figure___5sm8y"></div>
        </div>
      </div>

    <div class="footer-btn" slot="footer">
      <el-button type="primary" @click="handleCloseDialog">取消</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: 'labelTips',
  components: {},
  data() {
    return {}
  },
  created() {
  },
  mounted() {
  },
  watch: {},

  methods: {
    handleCloseDialog() {
      this.$emit('update:visableIf', false);
      this.$emit('handleQuery');
      this.$emit('getFriendInfo', {})//把值传给父级
    }
  }
}
</script>

<style scoped lang="scss">
.wrap___1jsaD {
  width: 100%;
}
.summary___2ADLo {
  display: flex;
  align-items: flex-start;
  grid-gap: 12px;
  gap: 12px;
}
.summary___2ADLo .title___oRZDT {
  font-size: 16px;
  font-family: PingFangSC-Semibold, PingFang SC;
  font-weight: 600;
  color: rgba(0, 0, 0, .85);
}
.summary___2ADLo .desc___3JIZW {
  margin-top: 2px;
  color: rgba(0, 0, 0, .45);
}
.demo___Go2yJ {
  margin-top: 20px;
  border-top: 1px solid #e9e9e9;
}
img {
  max-width: 100%;
}
.summary___2ADLo .icon___1w3Ln {
  width: 56px;
  height: 56px;
}
::v-deep .summary___2ADLo .icon___1w3Ln {
  width: 56px;
  height: 56px;
}
::v-deep .el-dialog__body {
  max-height: 600px;
  overflow-y: auto;
}
.summary___2ADLo {
  display: flex;
  align-items: flex-start;
  grid-gap: 12px;
  gap: 12px;
}
.demo___Go2yJ {
  margin-top: 20px;
  border-top: 1px solid #e9e9e9;
}
.demo___Go2yJ .title___oRZDT {
  margin-top: 20px;
  font-size: 20px;
  color: #00c270;
}
.demo___Go2yJ .desc___3JIZW {
  margin-top: 4px;
  color: rgba(0, 0, 0, .45);
  margin-bottom: 10px;
}
.demo___Go2yJ .figure-title___14lsz {
  margin-top: 12px;
  color: rgba(0, 0, 0, .85);
  padding: 2px 8px;
  display: inline-block;
  margin-bottom: 10px;
}
.footer-btn {
  display: flex;
  justify-content: flex-end;
}
</style>
